<template>
  <el-container style="height: 520px">
    <el-header>
      <vab-query-form-top-panel>
        <el-form
          inline
          label-width="49px"
          :model="queryList"
          style="margin-top: 5px"
          ><el-input
            v-model="queryList.Code"
            placeholder="请输入门店编码"
            style="width: 180px"
          ></el-input>
          &nbsp;
          <el-input
            v-model="queryList.Name"
            placeholder="请输入门店名称"
            style="width: 150px"
          ></el-input>
          &nbsp;
          <el-select
            v-model="queryList.State"
            placeholder="请选择状态"
            clearable
            :teleported="false"
            style="width: 150px"
          >
            <el-option label="---请选择状态---" value="" />
            <el-option label="禁用" value="0" />
            <el-option label="启用" value="1" />
          </el-select>
          &nbsp;
          <el-button type="primary" @click="$refs.mytable.getData()"
            >查询</el-button
          >
        </el-form>
      </vab-query-form-top-panel>
    </el-header>
    <el-foot>
      <scTable
        ref="mytable"
        :data="listData"
        :attrList="attrList"
        :valueList="valueList"
        :queryList="queryList"
        :sort-orders="['ascending', 'descending']"
        @selection-change="selectionChange"
        row-key="Code"
        key="Code"
        stripe
        :hideDo="true"
        height="480px"
        style="max-height: 480px; min-width: 420"
      >
        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column
          type="index"
          label="序号"
          prop="rownumber"
          width="50"
        ></el-table-column>
       
        <el-table-column
          label="机构编码"
          prop="Code"
          width="100"
          sortable
        ></el-table-column>
        <el-table-column label="机构主图" prop="MainAttachment" width="100" align="center">
							<template #default="scope">
								<el-image  style="height: 60px;" :src="scope.row.MainAttachment" :fit="contain" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :preview-src-list="[scope.row.MainAttachment]" :z-index="999" :preview-teleported="true"/>
							</template>
						</el-table-column>
        <el-table-column
        prop="Name"
        label="机构名称"
        width="150"
      ></el-table-column>
      <el-table-column
          label="品牌编码"
          prop="BrandCode"
          width="100"
          sortable
        ></el-table-column>
        <el-table-column
          label="品牌名称"
          prop="BrandName"
          width="100"
          sortable
        ></el-table-column>
      <el-table-column
        prop="Province"
        label="机构省份"
        width="80"
      ></el-table-column>
      <el-table-column
        prop="City"
        label="机构城市"
        width="80"
      ></el-table-column>
      <el-table-column
        prop="Area"
        label="机构区域"
        width="80"
      ></el-table-column>
      <el-table-column
        prop="OrgTypeName"
        label="类型"
        width="120"
      ></el-table-column>
        <el-table-column
          label="状态"
          prop="State"
          width="100"
          
        >
							<template #default="scope">
								<el-switch v-model="scope.row.State" disabled active-value="正常" inactive-value="禁用" />
							</template>
      </el-table-column> </scTable
    ></el-foot>
  </el-container>
</template>

<script>
import publicjs from "@/api/model/publicjs";
export default {
  name: "typelist",
  components: {
    publicjs,
  },
  data() {
    return {
      selectionRows: [],
      pkList: ["Code"],
      attrList: {
        Name: "Organize",
        UseDistinct: false,
        OrgCode: "",
        UseBackUp: false,
        UseGroup: false,
      },
      valueList: {
        Code: "Code",
        Name: "Name",
        BrandCode:"BrandCode",
        BrandName:"BrandName",
        Province:"Province",
        City:"City",
        Area:"Area",
        MainAttachment:"MainAttachment",
        ParentName: "ParentName",
        OrgTypeName: "OrgTypeName",
        State: "State",
      },
      queryList: {
        Code: "",
        Name: "",
        State: "",
      },
      result: "", // 运行结果
      props1: {
        checkStrictly: true,
        emitPath: false,
      },
    };
  },
  methods: {
    //表格选择后回调事件
    selectionChange(selection) {
      // eslint-disable-next-line no-debugger
      //debugger;
      this.selectionRows = selection;
    },

    async opBindData() {
      this.$refs.mytable.clearSort();
      this.$refs.mytable.getData();
    },
   
    formatterState(rowData) {
      // eslint-disable-next-line no-debugger
      //debugger;
      switch (rowData.State) {
        case "0":
          return "禁用";
        case "1":
          return "启用";
        default:
          return "";
      }
    },
  },
  async mounted() {
    await this.opBindData();
  },
};
</script>
